<template>
  <view class="city-containter">
    <view class="status-bar" style="background-color: #fff"></view>
    <city-select-head @back="goBack" :current-city="selectedCity" />
    <city-location :current-city="selectedCity" />
    <!-- 热点城市 -->
    <hot-cities @city-selected="handleCitySelect" />
    <!-- 所有城市 -->
    <all-cities @city-selected="handleCitySelect" />
  </view>
</template>

<script>
  import citySelectHead from "@/components/city-select/city-select-head.vue";
  import cityLocation from "@/components/city-select/city-location.vue";
  import HotCities from "@/components/city-select/hot-cities.vue";
  import AllCities from "@/components/city-select/all-cities.vue";

  export default {
    components: {
      citySelectHead,
      cityLocation,
      HotCities,
      AllCities,
    },
    data() {
      return {
        selectedCity: "",
      };
    },
    methods: {
      goBack() {
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.emit("citySelected", {
          city: this.selectedCity,
        });
        uni.navigateBack();
      },
      handleCitySelect(city) {
        this.selectedCity = city;
      },
      handleCityDefault(event) {
        this.selectedCity = event.city;
      },
    },
    onLoad() {
      this.getOpenerEventChannel().on(
        "location-city-event",
        this.handleCityDefault
      );
    },
    onUnload() {
      this.getOpenerEventChannel().off(
        "location-city-event",
        this.handleCityDefault
      );
    },
  };
</script>

<style scoped>
  .back-btn {
    padding: 0 15px;
    font-size: 20px;
    color: #fff;
  }
  .city-containter {
    background-color: black;
    color: white;
    height: 100vh;
  }
</style>
